<template>
  <div style="padding: 2.25rem">
    <el-row>
      <el-col :span="22">
        <el-input
          v-model="input3"
          placeholder="请输入内容"
          icon="el-icon-search"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="Blank()" class="Item_button"
          >新建题目</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 1.625rem">
      <el-tabs @tab-click="handleClick">
        <!-- <el-tab-pane label="全部题目" name="first1"></el-tab-pane> -->
        <el-tab-pane label="单选题目" name="first"></el-tab-pane>
        <el-tab-pane label="多选题目" name="second"></el-tab-pane>
        <el-tab-pane label="简答题目" name="third"></el-tab-pane>
        <el-tab-pane label="判断题目" name="fourth"></el-tab-pane>
        <el-tab-pane label="填空题目" name="five"></el-tab-pane>
      </el-tabs>
    </el-row>

    <el-table
      :data="tableData1"
      style="width: 100%; margin-top: 1.25rem"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="Id" width="80"> </el-table-column>
      <!-- <el-table-column prop="knowledge.label" label="知识点" width="120">
      </el-table-column> -->
      <el-table-column prop="" label="题型" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.topicId == 1">单选题</div>
          <div v-if="scope.row.topicId == 2">多选题</div>
          <div v-if="scope.row.topicId == 3">判断题</div>
          <div v-if="scope.row.topicId == 4">填空题</div>
          <div v-if="scope.row.topicId == 5">简答题</div>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="分数" width="100"> </el-table-column>
      <el-table-column prop="userName" label="作者"> </el-table-column>
      <el-table-column prop="" label="知识点" width="250">
        <template slot-scope="scope">
          <el-tag v-for="(item,index) in scope.row.knowledgeList" style="margin-left: 0.625rem" :key="index"
          >
            <span v-for="(Int, idx) in item" :key="idx">{{ Int.label }} </span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="score" label="题目" width="300">
        <template slot-scope="scope">
          <!-- <VueShowdown :markdown="scope.row.content" /> -->
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.difficulty == 1">一星</el-tag>
          <el-tag type="success" v-if="scope.row.difficulty == 2">二星</el-tag>
          <el-tag type="info" v-if="scope.row.difficulty == 3">三星</el-tag>
          <el-tag type="warning" v-if="scope.row.difficulty == 4">四星</el-tag>
          <el-tag type="danger" v-if="scope.row.difficulty == 5">五星</el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="address" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-search"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="handledit(scope.$index, scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange()"
      :current-page.sync="currentPage"
      :page-sizes="[20, 50, 100, 200, 300, 400]"
      :page-size="pageSizenum"
      layout="sizes, prev, pager, next"
      :total="1000"
      style="margin-top: 20px"
      background
    >
    </el-pagination>

    <el-dialog
      title="查看题目"
      :visible="dialogForm"
      :before-close="handleClose"
    >
      <!-- <div slot="footer" class="dialog-footer"> -->
      <div class="preview">
        <div class="text">
          <!-- <h4>题目预览</h4> -->
          <div>{{ tableData.content }}</div>
          <div v-if="tableData.topicId == 1 || tableData.topicId == 2">
            <div
              v-for="(domain) in tableData.optionsList"
              :key="domain.id"
            >
              <div>
                <el-tag type="success">{{ domain.id }}</el-tag>
                <VueShowdown :markdown="domain.content" class="value" />
              </div>
            </div>
          </div>
          <div>
            <h4>答案：</h4>

            <span v-if="tableData.topicId !== 3">{{ tableData.answer }}</span>
            <span v-if="tableData.topicId == 3 && tableData.answer == 0"
              >错误</span
            >
            <span v-if="tableData.topicId == 3 && tableData.answer == 1"
              >正确</span
            >
          </div>
          <div>
            <h4>分数：</h4>
            <span>{{ tableData.score }}分</span>
          </div>
          <div>
            <h4>知识点：</h4>
            <el-tag
              v-for="(item, index) in tableData.knowledgeList"
              style="margin-left: 0.625rem" :key="index"
              >{{ item[0].label }}</el-tag
            >
          </div>
          <div class="level">
            <h4>难度：</h4>
            <span>
              <el-rate
                v-model="tableData.difficulty"
                disabled="disabled"
              ></el-rate>
            </span>
          </div>
          <div class="analysis">
            <h4>解析：</h4>
            <span>{{ tableData.parsing }}</span>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="编辑题目" :visible.sync="drawer" width="80%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="题干：" prop="input">
          <el-input v-model="ruleForm.input"></el-input>
        </el-form-item>
        <!-- <el-form-item label="作者：" prop="name">
					<el-input v-model="ruleForm.name"></el-input>
				</el-form-item> -->
        <el-form-item label="知识点：" prop="">
          <el-cascader
            v-model="label"
            :options="options"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item label="分数：" prop="numm">
          <el-input-number
            v-model="num"
            :precision="2"
            :min="1"
            :max="10"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <div style="margin-top: 10px">
            <el-rate v-model="value1"></el-rate>
          </div>
        </el-form-item>
        <el-form-item label="题面：">
          <mavon-editor
            ref="md"
            id="editor"
            v-model="ruleForm.input"
            :toolbars="toolbars"
            defaultOpen="fasle"
          >
          </mavon-editor>
        </el-form-item>

        <div>
          <template v-if="tableData1[index1].topicId === 3">
            <el-form-item
              label="选项："
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-dynamic"
              prop="option"
            >
              <div
                v-for="(domain, index) in ruleForm.domains1"
                :key="domain.key"
                class="options"
              >
                <div>
                  <span class="spann">{{ letter[index] }}</span>
                  <span class="span">{{ letter[index] }}</span>
                  <el-input class="input" v-model="domain.value"></el-input>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="答案：" prop="type">
              <el-radio-group v-model="checkedCities" class="checkedCities">
                <el-radio
                  v-for="(city, index) in ruleForm.domains1"
                  @change="type(letter[index])"
                  :label="letter[index]"
                  :key="city.key"
                  name="type"
                >
                  <!-- <span @click="type(letter[index])" class="typess">
                    {{ letter[index] }}
                  </span> -->
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </template>

          <template
            v-if="
              tableData1[index1].topicId === 1 ||
              tableData1[index1].topicId === 2
            "
          >
            <el-form-item
              label="选项："
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-dynamic"
              prop="option"
            >
              <div
                v-for="(domain, index) in ruleForm.domains1"
                :key="domain.key"
                style="margin-top: 10px"
              >
                <div style="display: flex">
                  <span style="margin-right: 10px">{{ letter[index] }}</span>
                  <el-input
                    class="input"
                    v-model="domain.optionContent"
                  ></el-input>
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    class="button"
                    @click.prevent="removeDomain(domain)"
                  ></el-button>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="答案：" prop="type">
              <!-- 单选 -->
              <template v-if="tableData1[index1].problemId === '单选题'">
                <el-radio-group v-model="checkedCities" class="checkedCities">
                  <el-radio
                    v-for="(city, index) in ruleForm.domains"
                    :label="city"
                    :key="city.key"
                    name="type"
                  >
                    <span @click="type(letter[index])" class="typess">
                      {{ letter[index] }}
                    </span>
                  </el-radio>
                </el-radio-group>
              </template>
              <!-- 多选 -->
              <template v-if="tableData1[index1].problemId === '多选题'">
                <el-checkbox-group v-model="checkedCities">
                  <el-checkbox
                    v-for="(city, index) in ruleForm.domains"
                    @change="type(letter[index])"
                    :label="letter[index]"
                    :key="city.key"
                    name="type"
                  >
                    <span @click="type(letter[index])" class="typess">
                      {{ letter[index] }}
                    </span>
                  </el-checkbox>
                </el-checkbox-group>
              </template>
            </el-form-item>
          </template>
          <template
            v-if="
              tableData1[index1].topicId === 4 ||
              tableData1[index1].topicId === 5
            "
          >
            <el-form-item label="答案：" prop="type">
              <el-input
                type="textarea"
                v-model="ruleForm.label"
                rows="3"
              ></el-input>
            </el-form-item>
          </template>
        </div>

        <el-form-item label="解析：" prop="inputss">
          <el-input
            type="textarea"
            v-model="ruleForm.analysis"
            rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="success" @click="addDomain">新增选项</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import marked from "marked";
import hljs from "highlight.js";
import javascript from "highlight.js/lib/languages/javascript";
import "highlight.js/styles/monokai-sublime.css";
import { TestManager } from "../../../../request/test.js";
export default {
  data() {
    return {
      Subjectswitch: "first",
      judgeId: "",
      //知识点数组
      options: [],
      knowledge: "",
      question: "",
      difficulty: "",
      stem: "",
      input: "",
      tableData1: [],
      input3: "",
      activeName: "",
      // currentPag:0,

      dialogForm: false,
      index: 0,
      index1: 0,
      tableData: [],
      drawer: false,
      ruleForm: {
        domains: [],
        //判断假数据
        domains1: [
          {
            value: "正确",
          },
          {
            value: "错误",
          },
        ],
        letter: ["√", "×"],

        knowledge: [],
        name: "",
        data: "",
        input: "1",
        analysis: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        label: "",
        single: {
          answer: "",
          content: "",
          createTime: "",
          difficulty: 0,
          isDelete: 0,
          knowledgeId: 0,
          option: "",
          parsing: "",
          score: 0,
          singleId: 0,
          topicId: 0,
          updateTime: "",
        },
      },
      value1: null,
      num: 1,
      checkedCities: [],
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      centerDialogVisible: false,
      single: {},
      rules: {
        name: [
          {
            required: true,
            message: "请选择作者",
            trigger: "blur",
          },
        ],
        input: [
          {
            required: true,
            message: "请输入题干",
            trigger: "blur",
          },
        ],

        numm: [
          {
            required: true,
            message: "请设置分数",
            trigger: "blur",
          },
        ],
        difficulty: [
          {
            required: true,
            message: "请设置难度",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个标准答案",
            trigger: "blur",
          },
        ],
        resource: [
          {
            required: true,
            message: "请选择活动资源",
            trigger: "change",
          },
        ],
        desc: [
          {
            required: true,
            message: "请填写活动形式",
            trigger: "blur",
          },
        ],
      },
      valuename: "",

      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        /* 2.2.1 */
        subfield: false, // 单双栏模式
        preview: true, // 预览
        toolbarsFlag: false,
      },
      blogContent: "",
      blogMdContent: "",
      text: "**chbferbfb**",
      //页数和也没
      pageSizenum: 20,
      currentPage: 1,
      tabList: "first1",
    };
  },
  created() {
    this.Inint();
    this.getAllKnowledgeTree();
  },
  methods: {
    //获取题目列表
    getQuestionList(e) {
      var parmas = {
        topicId: e,
      };
      TestManager.getQuestionList(
        this.currentPage,
        this.pageSizenum,
        parmas
      ).then((res) => {
        if (res.data.data.dataList) {
          this.tableData1 = res.data.data.dataList;
        } else {
          this.tableData1 = [];
        }
      });
    },
    label() {},
    // //初始化页面
    Inint() {
      var parmas = {
        topicId: 1,
      };
      TestManager.getQuestionList(
        this.currentPage,
        this.pageSizenum,
        parmas
      ).then((res) => {
        if (res.data.data.dataList) {
          this.tableData1 = res.data.data.dataList;
        } else {
          this.tableData1 = [];
        }
      });
    },
    //筛选题目
    handleClick(tab, event) {
      this.tableData1 = [];
      this.tabList = tab.name;
      if (tab.name === "first1") {
        this.Inint();
      }
      if (tab.name === "first") {
        this.getQuestionList(1);
      } else if (tab.name === "second") {
        this.getQuestionList(2);
      } else if (tab.name === "fourth") {
        this.getQuestionList(3);
      } else if (tab.name === "five") {
        this.getQuestionList(4);
      } else if (tab.name === "third") {
        this.getQuestionList(5);
      }
    },
    //关闭查看题目窗口
    handleClose() {
      this.dialogForm = false;
    },
    //获取知识点
    getAllKnowledgeTree() {
      TestManager.getAllKnowledgeTree().then((res) => {
        console.log(res.data.data);
        this.options = res.data.data;
      });
    },

    currentPage2() {},
    handleSizeChange(val) {
      this.pageSizenum = val;
    },
    handleCurrentChange() {
      // alert(val);
      if (this.tabList === "first1") {
        this.Inint();
      }
      if (this.tabList === "first") {
        this.getQuestionList(1);
      } else if (this.tabList === "second") {
        this.getQuestionList(2);
      } else if (this.tabList === "fourth") {
        this.getQuestionList(3);
      } else if (this.tabList === "five") {
        this.getQuestionList(4);
      } else if (this.tabList === "third") {
        this.getQuestionList(5);
      }
    },
    handleChange(value) {
      console.log(this.valuename);
    },

    //查看题目
    handleEdit(index1, row) {
      axios
        .get("/question/getQuestionDetail?id=" + row.id, {
          headers: {
            token: getToken(),
            "Content-Type": "application/json;charset=utf-8",
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.tableData = res.data.data;
        });
      this.dialogForm = true;
    },
    handledit(index, row) {
      this.drawer = true;
      this.index1 = index;
      if (row.topicId == 1 || row.topicId == 2) {
        this.ruleForm.domains = JSON.parse(
          this.tableData1[this.index1].options
        );
      }
      this.ruleForm.input = this.tableData1[index].content; //题干
      this.ruleForm.name = this.tableData1[index].author;
      this.valuename = this.tableData1[index].knowledge.label; //知识点
      this.num = this.tableData1[index].score;
      this.value1 = this.tableData1[index].difficulty;
      this.ruleForm.analysis = this.tableData1[index].parsing;
      this.drawer = true;
    },
    //删除题目
    handleDelete(index, rows) {
      this.$confirm("此操作将删除该文件,是否继续", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post(
              "/question/deleteQuestion",
              this.qs.stringify({
                id: rows.id,
              }),
              {
                headers: {
                  token: getToken(),
                  "Content-Type": "application/x-www-form-urlencoded",
                },
              }
            )
            .then((e) => {});
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.tableData1.splice(index, 1);
    },
    removeDomain(item) {
      var index = this.ruleForm.domains.indexOf(item);
      if (index !== -1) {
        this.ruleForm.domains.splice(index, 1);
      }
    },
    //单选题
    addDomain() {
      this.ruleForm.domains.push({
        value: "",
        key: Date.now(),
      });
    },
    submitForm(formName) {
      var data = {
        content: this.ruleForm.input,
        options: JSON.stringify([
          {
            optionItem: "A",
            optionContent: "xxx",
          },
          {
            optionItem: "B",
            optionContent: "xxx",
          },
          {
            optionItem: "C",
            optionContent: "xxx",
          },
          {
            optionItem: "D",
            optionContent: "xxx",
          },
        ]),
        answer: this.ruleForm.input,
        parsing: this.ruleForm.analysis,
        difficulty: this.value1,
        score: this.num,
        knowledgeId: 1,
      };
      axios
        .post("/question/single/addSingle", data, {
          headers: {
            token: getToken(),
            "Content-Type": "application/json;charset=utf-8",
          },
        })
        .then((res) => {
          // this.ruleForm = res
          console.log(res);
        });
    },
    submitFormss(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      axios
        .post("/api/question/single/modifySingle", this.single)
        .then((res) => {
          this.ruleForm = res;
        });
    },
    Blank() {
      if (this.tabList === "first1") {
        this.$router.push("/SingleCom");
      }
      if (this.tabList === "first") {
        this.$router.push("/SingleCom");
      } else if (this.tabList === "second") {
        this.$router.push("/MultipleCom");
      } else if (this.tabList === "fourth") {
        this.$router.push("/JudgeCom");
      } else if (this.tabList === "five") {
        this.$router.push("/BriefanswerCom");
      } else if (this.tabList === "third") {
        this.$router.push("/BlanksCom");
      }
    },
  },
};
</script>

<style scoped="scoped" lang="scss">
.Item_button {
  // margin-top: 1.25rem;
  margin-left: 0.625rem;
  background-color: #03d3bd;
  border: none;
  color: white;
}
.preview {
  margin-top: 20px;
  margin-left: 20px;
  // position: absolute;
  right: 15px;
  // border: 1px solid #aaa;

  .title {
    width: 100%;
    height: 7vh;
    // border-bottom: 1px solid #aaa;
    line-height: 7vh;
    padding-left: 20px;
  }

  .text {
    margin-top: 20px;
    padding-left: 20px;
    width: 40vw;

    div {
      margin-bottom: 5px;
    }

    .analysis {
      margin-bottom: 25px;
    }
  }
}

.el-dialog__body {
  height: 90vh;
}
</style>
